<template>
    <div class="app-container">
        <div>
            <storage-customer-info :value="detailInfo"></storage-customer-info>
            <storage-order-info :value="detailInfo" v-if="detailInfo != null && detailInfo.carInStorage != null"></storage-order-info>
            <storage-purchase-info :value="detailInfo" v-if="!isShow"></storage-purchase-info>
            <storage-supplier-info :value="detailInfo" v-if="isShow"></storage-supplier-info>
            <storage-car-info :value="detailInfo" v-if="detailInfo != null && detailInfo.carInStorage != null"></storage-car-info>
        </div>
        <CommonContainer title="入库信息">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="top">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="车牌号" prop="carNo">
                            <el-input v-model="form.carNo" placeholder="请输入车牌号" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="入库里程(km)" prop="inboundMileage">
                            <el-input v-model="form.inboundMileage" placeholder="请输入入库里程" type="number" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="入库油量(%)" prop="inboundOilQuantity">
                            <el-input v-model="form.inboundOilQuantity" placeholder="请输入入库油量" type="number"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="入库里程附件" prop="inboundMileageOss">
                         <image-common v-model="form.inboundMileageOss" :up-type="2" :limit="1" info="里程表"></image-common>
                        </el-form-item>
                    </el-col>

                    <el-col :span="16">
                        <el-form-item label="入库油量附件" prop="inboundOilQuantityOss">
                            <image-common v-model="form.inboundOilQuantityOss" :up-type="2" :limit="1" info="油量表"></image-common>
                        </el-form-item>
                    </el-col>


                    <el-col :span="8">
                        <el-form-item label="上传行驶本" prop="drivingLicenseOss">
                            <image-common v-model="form.drivingLicenseOss" :up-type="2" info="行驶本"></image-common>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="上传车辆照片" prop="carPhotoOss">
                            <image-common v-model="form.carPhotoOss" :up-type="2" info="车辆照片"></image-common>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item  prop="registrationCertificateOss">
                            <template slot="label">
                                <span>上传登记证照片</span>
                                <!-- <span style="color:red">(需上传信息页和变更页)</span> -->
                            </template>
                            <image-common v-model="form.registrationCertificateOss" :up-type="2" info="登记证照片"></image-common>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea" placeholder="请输入说明" v-model="form.remark" maxlength="500" :rows="5" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="附件" prop="attachmentOss">
                            <div class="flex">
                                <image-common :up-type="2" info="上传附件" :limit="20" v-model="form.attachmentOss"></image-common>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </CommonContainer>
        <div class="card-wrap flex justify-end card-padding">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submitForm(1)">保存</el-button>
            <el-button type="primary" @click="submitForm(2)">提交审批</el-button>
        </div>
    </div>
</template>

<script>
import StorageCustomerInfo from "@/views/carInventory/components/StorageCustomerInfo.vue";
import StorageOrderInfo from "@/views/carInventory/components/StorageOrderInfo.vue";
import StoragePurchaseInfo from "@/views/carInventory/components/StoragePurchaseInfo.vue";
import StorageSupplierInfo from "@/views/carInventory/components/StorageSupplierInfo.vue";
import StorageCarInfo from "@/views/carInventory/components/StorageCarInfo.vue";
import * as inInventoryApi from "@/api/carInventory/inInventory";
import { watch } from "vue-demi";
export default {
    components: {StorageCarInfo, StorageSupplierInfo, StoragePurchaseInfo, StorageOrderInfo, StorageCustomerInfo},
    props: {},
    data() {
        return {
            detailInfo:{},
            isShow:false,
            form:{
                inboundId:this.$route.query.inboundId,//入库id
                inboundMileage:null,//入库里程
                inboundMileageOss:null,//入库里程附件
                inboundOilQuantity:null,//入库油量
                inboundOilQuantityOss:null,//入库油量附件
                drivingLicenseOss:null,//行驶本
                carPhotoOss:null,//车辆
                registrationCertificateOss:null,//登记证
                attachmentOss:null,//附件
                remark:null,//备注,
                saveFlag:0,
                carNo:'',
            },
            rules: {
                carNo:[
                    {required: true, message: '请输入车牌号', trigger: 'blur'},
                ],
                inboundMileage: [
                    {required: true, message: '请输入入库信息', trigger: 'blur'},
                    { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输⼊正确的格式,可保留两位⼩数' }
                ],
                inboundMileageOss: [
                    {required: true, message: '请上传入库里程附件', trigger: 'blur'},
                ],
                inboundOilQuantity: [
                    {required: true, message: '请输入入库油量', trigger: 'change'},
                    { pattern: /^[0-9]*$/, message: '请输入正整数' }

                ],
                inboundOilQuantityOss: [
                    {required: true, message: '请上传入库油量附件', trigger: 'change'},
                ],
                drivingLicenseOss: [
                    {required: true, message: '请上传行驶驾本', trigger: 'change'},
                ],
                carPhotoOss: [
                    {required: true, message: '请上传车辆照片', trigger: 'change'},
                ],
                registrationCertificateOss: [
                    {required: true, message: '请上传登记证照片', trigger: 'change'},
                ],
            },
            viewType:1, // 1.编辑
            show:true,
            
        }
    },
    computed: {},
    methods: {

        // 获取入库单详情
        getDetail(){
            inInventoryApi.inStorageDetails(this.form.inboundId).then(info=>{
                    this.detailInfo = {...info.data,inboundId:this.$route.query.inboundId,source:this.$route.query.source}
                    this.show = true
                    // 完善信息
                    this.form = info.data.carInStorage
              // console.log(2222222222);
              //
              // console.log(this.detailInfo);
              // this.getQuota(this.detailInfo.orderInfoVo.orderNo, this.detailInfo.carBasicVo.modelName)
              // this.getQualifiedCard(this.detailInfo.carInStorage.purchaseNo, this.detailInfo.carBasicVo.vinNo)
              // this.getCarGpsInfo(this.detailInfo.carInStorage.carId)
            })
        },
        //保存|提交
        submitForm(type){
            this.form.saveFlag=type;
            if (type == 1){//保存
                this.insertCarInStorage()
                // if (this.viewType == 1){//编辑
                //     this.updateCarInStorage()
                // }
                // else{//新增

                // }
            }else if(type == 2){//提交审批
              this.commitApproval()
            }
        },
        //提交审批
        commitApproval(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    // let list = this.form.registrationCertificateOss.split(',')
                    // if(list.length>1){
                       
                    // }else{
                    //     this.$message.error('请至少上传2张登记证照片')
                    // }
                    this.updateCarInStorage()
                   
                }
            })
        },
        //保存
        insertCarInStorage(){
            const loading = this.$loading({
              lock: true,
              text: "保存中",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
           
            inInventoryApi.insertCarInStorage({...this.detailInfo,...this.form})
                .then(res=>{
                    if (res.code == 200){
                        loading.close();
                        this.cancel()
                    }
                })
                .catch(() => {
                    loading.close();
                });
        },
        //编辑
        updateCarInStorage(){
            const loading = this.$loading({
              lock: true,
              text: "提交中",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
            inInventoryApi.updateCarInStorage({...this.detailInfo,...this.form})
                .then(res=>{
                    if (res.code == 200){
                        loading.close();
                        this.cancel()
                    }
                })
                .catch(() => {
                    loading.close();
                });
        },
        cancel(){
            this.$router.back()
        },
      // getQualifiedCard(purchaseNo,vinNo){
      //   if (this.Empty(purchaseNo) || this.Empty(vinNo)) return;
      //   getPurchaseQualifiedCard(purchaseNo, vinNo).then(res => {
      //     var pd = res.data;
      //     if (!pd) {
      //       pd = {};
      //     }
      //     this.detailInfo.carBasicVo.carLevel = pd.carLevel;
      //     this.detailInfo.carBasicVo.exteriorColor = pd.exteriorColor;
      //     this.detailInfo.carBasicVo.interiorColor = pd.interiorColor;
      //   }).finally(() => {
      //     this.loading = false
      //   })
      // },
      // getCarGpsInfo(carId){
      //   if (this.Empty(carId)) return;
      //   carGpsInstall(carId).then(res => {
      //     var d = res.data;
      //     if (!d) {
      //       d = {};
      //     }
      //     this.detailInfo.gpsDetailVo.gpsType = {'1':'有线','2':'无线','3':'有线+无线'}[new String(d.equipmentType).trim()];
      //   }).finally(() => {
      //     this.loading = false
      //   })
      // },
      // getQuota(orderCode, carModelName){
      //   if (this.Empty(orderCode)) return;
      //   if (this.Empty(carModelName)) return;
      //   getQuotaProductByOrderCar(orderCode, carModelName).then(res => {
      //     var pd = res.data;
      //     if (!pd) {
      //       pd = {};
      //     }
      //     if (!pd['plan']) {
      //       pd['plan'] = {};
      //     }
      //     this.detailInfo.orderInfoVo.gpsAmount = pd.plan.gpsFee;
      //     this.detailInfo.orderInfoVo.maintenanceMonthlyPrice = pd.maintenancePrice;
      //     this.detailInfo.orderInfoVo.purchaseTaxPrice = pd.carPurchaseTax;
      //     this.detailInfo.orderInfoVo.endPayMoney = pd.plan.planResidual;
      //     this.detailInfo.orderInfoVo.maintenanceAnnualMileageVal = pd.maintenanceAnnualMileageKey;
      //     this.detailInfo.orderInfoVo.payFrequency = pd.plan.planPaymentFrequencyTypeStr;
      //     this.detailInfo.orderInfoVo.paymentDate = pd.plan.planPaymentMethodType;
      //     this.detailInfo.orderInfoVo.margin = pd.plan.planContractCashdeposit;
      //     this.detailInfo.orderInfoVo.firstPayMoney = pd.plan.planFirstRent;
      //     this.detailInfo.orderInfoVo.retrofittingFee = Number(pd.otherFeeAmount) + Number(pd.attachedDecorationAmount);
      //     this.detailInfo.orderInfoVo.registerPrice = pd.carLicensePrice;
      //     this.detailInfo.orderInfoVo.logisticFee = pd.plan.logisticFee;
      //     this.detailInfo.orderInfoVo.planRent = pd.plan.planRent;
      //     this.detailInfo.orderInfoVo.leaseTerm = pd.plan.planTenancyType;
      //   }).finally(() => {
      //     this.loading = false
      //   })
      // },

    },
  created() {
    this.getDetail()
    if(this.$route.query?.source==1){
                this.isShow = true
            }else{
                this.isShow = false
            }
  },
  mounted() {
        // this.getDetail()
    },

}
</script>

<style lang="scss" scoped>

::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 15px;
    width: 70%;
}
</style>
